<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* *代表页面中所有的元素 */
      * {
        /* 元素默认的内外边距先清除掉 */
        margin: 0;
        padding: 0;
      }

      /* 找到我们修改样式元素 ，再来css属性设置外观 */
      #canvas {
        /* 加个边框 */
        /* border: 1px solid red; */

        /* 外边距的意思 margin:auto 可以起到盒子的水平居中的效果 前提： 盒子必须是 块级元素 */
        margin: auto;

        /* 把canvas显示模式 修改为块级元素 */
        display: block;

        /* 给画布加 一个阴影效果 */
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);

        /* 尽量不要直接使用css改变画布的宽高 */
      }
    </style>
  </head>
  <body>
    <!-- canvas 其实就是html5 提供的一个标签 （双标签） -->
    <!--  -->
    <canvas id="canvas" width="300" height="300">
      你的浏览器不支持canvas！赶紧升级！
    </canvas>

    <script>
      // 1.  获取到画布元素
      var canvas = document.querySelector("#canvas");
      var WIDTH = 600,
        HEIGHT = 800;
      console.log(canvas);

      canvas.width = WIDTH;
      canvas.height = HEIGHT;

      //   2. 获取“画笔”  （context 上下文）
      var ctx = canvas.getContext("2d");

      var obj = {
        x: 0,
        y: 0,
        width: 50,
        height: 50,
        color: "orange",
        move: function () {
          obj.x += 5;
          // 一旦 矩形 移动到画布的最右边 ，再回到最左边
          if (obj.x >= WIDTH - 50) {
            obj.x = 0;
          }
        },
        draw: function(ctx) {
          // 把矩形绘制到画布上
          ctx.fillStyle = obj.color;
          ctx.fillRect(obj.x, obj.y, obj.width, obj.height);
        }
      };

      var timer = setInterval(function () {
        // 每一次绘制图像时 都要把之前的图像清除掉
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, WIDTH, HEIGHT);

        console.log("动画在播放");

        obj.move();
        obj.draw(ctx);
        
      }, 1000 / 60);

      console.log(timer);
    </script>
  </body>
</html>